<template>
  <div class="bar-component">
    <div :id="id" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    props: {
      id: String,
      data: {
        type: Array,
        default: () => {
          return [10, 20, 40, 60, 80, 100, 120, 100]
        }
      }
    },
    data() {
      return {
        myChart: null,
        list: [],
        option: {
          color: ['#3AA1FF'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: '' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true,

          },
          yAxis: {
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#9E9E9E'
              }
            },
            splitLine: { //保留网格线
              show: true,
              lineStyle: { //y轴网格线设置
                color: '#EEEEEE',
                width: 1,
                type: 'dashed'
              }
            },
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#666',
              }
            },
            offset: 10,
          }],

          series: [{ // For shadow
            type: 'bar',
            barMaxWidth: '55%',
            barCategoryGap: '40%',
            animation: false,
            data:[]
          }]
        }
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let {id} = this;
        this.myChart = echarts.init(document.getElementById(id));
        this.myChart.setOption(this.option);
      },
    },
    watch: {
      data: {
        handler(cur, old) {
          cur.map((v, i) => {
            let colorList = ['#3AA1FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B'];
            this.list.push({
              name: v.regionName,
              value: Number(v.value),
              color: colorList[i]
            })
          });

          this.option.xAxis[0].data = this.list.map((v, i) => {
            return {
              value: v.name
            }
          });
          if (this.id === 'register') {
            this.list.map(v => {
              this.option.series[0].data.push({
                name: v.name,
                value: v.value,
                itemStyle: {normal: {color: v.color}}
              })
            });

          } else {
            this.option.series[0].data = this.list;
          }

          //this.myChart.setOption(this.option);
        },
        deep: true,
        immediate: true
      }
    }
  };
</script>

<style scoped>
  .bar-component {
    height: 100%;
    width: 100%;
  }
</style>

